<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-search @onConfirm="handleSearch"></pure-search>
			</pj-demo>

			<!-- 提示文本 -->
			<pj-demo title="提示文本">
				<pure-search
					:placeholder="placeholder"
					@onConfirm="handleSearch"
				></pure-search>
				<pure-gap size="12px"></pure-gap>
				<pure-search
					:placeholder="placeholders"
					@onConfirm="handleSearch"
				></pure-search>
			</pj-demo>

			<!-- 搜索按钮 -->
			<pj-demo title="搜索按钮">
				<pure-search
					:placeholder="placeholders"
					show-btn
					@onConfirm="handleSearch"
				></pure-search>
				<pure-gap></pure-gap>
				<pure-search
					:placeholder="placeholders"
					show-btn
					link-btn
					@onConfirm="handleSearch"
				></pure-search>
			</pj-demo>

			<!-- 默认值 -->
			<pj-demo title="默认值">
				<pure-search
					v-model="searchValue"
					@onConfirm="handleSearch"
				></pure-search>
			</pj-demo>

			<!-- 可清空 -->
			<pj-demo title="可清空">
				<pure-search
					clearable
					:placeholder="placeholders"
					v-model="searchValue"
					@onConfirm="handleSearch"
				></pure-search>
			</pj-demo>

			<!-- 插槽 -->
			<pj-demo title="插槽">
				<pure-search
					:placeholder="placeholders"
					@onConfirm="handleSearch"
				>
					<template #right>
						<view class="icons">
							<pure-icon name="__home"></pure-icon>
							<pure-icon name="__edit"></pure-icon>
						</view>
					</template>
				</pure-search>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo title="禁用状态">
				<pure-search
					:placeholder="placeholders"
					@onConfirm="handleSearch"
					disabled
				>
				</pure-search>
			</pj-demo>

			<!-- 只读状态 -->
			<pj-demo title="只读状态">
				<pure-search
					:placeholder="placeholders"
					readonly
					@onClick="handleClick"
				>
				</pure-search>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	const searchValue = ref("陈老师儿~");

	// 提示内容
	const placeholder = ref("请输入搜索内容");
	const placeholders = ref(["请输入您要查找的订单号", "请输入您要查找的用户名"]);

	// 搜索
	function handleSearch(keyword, placeholder) {
		const word = keyword === "" ? "空" : keyword;
		const place = placeholder === "" || placeholder === undefined ? "空" : placeholder;

		uni.showModal({
			content: `搜索内容：${word}\n搜索提示：${place}`
		});
	}

	// 点击只读状态搜索框
	function handleClick() {
		uni.showToast({
			title: "点击了只读状态搜索框",
			icon: "none"
		});
	}
</script>

<style lang="scss" scoped>
	.icons {
		font-size: var(--pure-font-size-large);
		display: flex;
		flex-direction: row;
		gap: 8px;
	}
</style>
